<style scoped lang="less">
    .index {

        text-align: left;
        h1 {
            height: 150px;
            img {
                height: 100%;
            }
        }
        h2 {
            color: #666;
            margin-bottom: 200px;
            p {
                margin: 0 0 50px;
            }
        }
        .ivu-row-flex {
            height: 100%;
        }
        .item-thumb-info {
            height: 134px;
        }
        .ivu-col {
            padding: 10px 20px 10px 0;
        }
        .item-thumb-info {
            position: relative;
            background: #000;
            color: #fff;
            a {
                color: #fff
            }
            cursor: pointer;
            padding: 10px;
            background-position: center center;
            background-size: cover;
            &:hover {
                -webkit-box-shadow: 0 3px 21px rgba(0, 0, 0, 0.3);
                box-shadow: 0 3px 21px rgba(0, 0, 0, 0.3);
                -webkit-transition: all ease-in-out 218ms;
                transition: all ease-in-out 218ms;
                background-size: 120% 120%;
            }
        }

    }
</style>
<template>
    <div class="index">
        <Row type="flex">
            <Col :md="4" :sm="12" :xs="24" v-for="account in accountList" :key="account.bookkeepingAccountId">

            <router-link :to="'/account/'+account.bookkeepingAccountId">
                <div :style="'background-image:url('+getStaticPre(account.bookkeepingAccountPicture)+')'"
                     :id="account.bookkeepingAccountId" class="item-thumb-info">
                    <div class="edit-set pull-right">
                        <div>结 余:{{account.surplus}}</div>
                        <a title="修改" name="edit" @click.stop.prevent="showEditModal(account)" v-show="getAccess(account.bookkeepingAccountId,'bookkeeping-edit-flow')">
                            <Icon type="edit" size="10"></Icon>
                        </a>&nbsp;
                        <a title="删除" name="delete" @click.stop.prevent="removeAccount(account)" v-show="getAccess(account.bookkeepingAccountId,'bookkeeping-delete-flow')">
                            <Icon type="trash-a" size="10"></Icon>
                        </a>
                    </div>

                    <p class="project-name">{{account.bookkeepingAccountName}} </p>
                    <p class="project-desc"></p>
                    <div style="position:absolute;bottom:5px;left:5px;right:5px">
                        <div class="pull-right">总收入:{{account.income}}</div>
                        <div>总支出:{{account.expense}}</div>
                    </div>
                </div>
            </router-link>
            </Col>
            <Button type="primary" v-show="getAccess(tenantApp.tenantAppId,'bookkeeping-system-add-account')"
                    @click="showModal()">
                创建新的账本
                <Icon type="ios-plus-empty"></Icon>
            </Button>
        </Row>
        <Modal v-model="modalVisible" title="新增账本" @on-ok="addAccount()">
            <Form :model="formItem" :label-width="80" :rules="ruleValidate">
                <Form-item label="账本名称" prop="addAccountName">
                    <Input v-model="formItem.bookkeepingAccountName" placeholder="请输入账本名称"/>
                </Form-item>
                <Form-item label="账本备注">
                    <Input v-model="formItem.bookkeepingAccountRemark" type="textarea"
                           :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入账本备注"/>
                </Form-item>
            </Form>
        </Modal>
        <Modal v-model="editModalVisible" title="修改账本" @on-ok="editAccount(account)">
            <Form :model="account" :label-width="80" :rules="ruleValidate">
                <Form-item label="账本名称" prop="updateAccountName">
                    <Input v-model="account.bookkeepingAccountName" placeholder="请输入账本名称"/>
                </Form-item>
                <Form-item label="账本备注">
                    <Input v-model="account.bookkeepingAccountRemark" type="textarea"
                           :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入账本备注"/>
                </Form-item>
            </Form>
        </Modal>
        <!--<Row>-->
        <!--<Col span="24">-->
        <!--加载其它内容页面内容-->
        <!--<div v-html="otherHTML"></div>-->
        <!--</Col>-->
        <!--</Row>-->
    </div>
</template>
<script>
    import util from "../../../../libs/util.js"
    export default {
        data () {
            return {
                modalVisible: false,
                editModalVisible: false,
                formItem: {
                    bookkeepingAccountName: '',
                    bookkeepingAccountRemark: ''
                },
                account: {
                    bookkeepingAccountId: '',
                    bookkeepingAccountName: '',
                    bookkeepingAccountRemark: ''
                },
                tenantApp: {},
                formValidate: {
                    addAccountName: '',
                    updateAccountName: ''
                },
                ruleValidate: {
                    addAccountName: [
                        { required: true, message: '账本名称不能为空', trigger: 'blur' }
                    ],
                    updateAccountName: [
                        { required: true, message: '账本名称不能为空', trigger: 'blur' }
                    ]
                }
            }
        },
        computed: {
            accountList: function () {
                return this.$store.state.accountList
            },
            accessList: function () {
                return this.$store.state.accessList
            }

        },

        methods: {
            getAccess: function (objectId, menuId) {
                let accessMap = this.$store.state.accessList;
                let permissionList = accessMap[objectId];
                if (permissionList) {
                    for (let i = 0, len = permissionList.length; i < len; i++) {
                        if (permissionList[i].permissionType === menuId) {
                            return true;
                        }
                    }
                }
                return false;
            },
            showModal: function () {
                this.modalVisible = true;
            },
            showEditModal: function (account) {
                let self = this;
                self.editModalVisible = true;
                self.account.bookkeepingAccountId = account.bookkeepingAccountId;
                self.account.bookkeepingAccountName = account.bookkeepingAccountName;
                self.account.bookkeepingAccountRemark = account.bookkeepingAccountRemark;
            },
            addAccount () {
                let self = this;
                self.$http.post(self.$store.state.apiHost + "/bookkeeping/system/api/account", self.$qs.stringify(this.formItem)).then(function (res) {
                    self.modalVisible = false;
                    self.formItem.bookkeepingAccountName = '';
                    self.formItem.bookkeepingAccountRemark = '';
                    self.$store.commit("addAccount", res.data.data);
                })
            },
            getStaticPre: function (url) {
                return util.getStaticPre(url)
            },
            removeAccount: function (account) {
                let self = this;
                self.$Modal.confirm({
                    title: '警告',
                    content: '一经删除无法恢复,确认删除该账本吗？',
                    onOk: () => {
                        self.$http.delete(self.$store.state.apiHost + "/bookkeeping/api/account/" + account.bookkeepingAccountId).then(function (res) {
                            self.$store.commit("deleteAccount", account);
                        })
                    },
                    onCancel: () => {
                    }
                });
            },
            editAccount: function (account) {
                let self = this;
                let accountList = this.$store.state.accountList;
                let currentIndex = 0;
                for (let i = 0, len = accountList.length; i < len; i++) {
                    if (accountList[i].bookkeepingAccountId === account.bookkeepingAccountId) {
                        currentIndex = i;
                        break;
                    }
                }
                this.$http.put(self.$store.state.apiHost + "/bookkeeping/api/account/" + account.bookkeepingAccountId, self.account).then(function (res) {
                    self.$store.commit("editAccount", {data: res.data.data, index: currentIndex});
                })
            }
        },
        created: function () {
            let self = this;
            self.$http.get(self.$store.state.apiHost + "/bookkeeping/api/accounts").then(function (res) {
                self.$store.commit('initAccountList', res.data.data);
            });
            self.$http.get(self.$store.state.apiHost + "/bookkeeping/api/access", {
                params: {"": ""}
            }).then(function (res) {
                self.$store.commit('initAccessList', res.data.data);
            });
            self.$http.get(self.$store.state.apiHost + "/foundation/tenant/app/data", {params: {"appName": "wallet"}}).then(function (res) {
                self.tenantApp = res.data;
            });
        },
        mounted: function () {
//            this.$http.get("/test.html",{
//                "responsetype":"document"
//            }).then(function(res){
//                self.otherHTML=res.data;
//            })
        }
    };
</script>
